<script lang="ts" setup>
  import { BMAP_KEY } from '@/constant/key'
  import { loadBMap } from '@/utils/map'
  import 'echarts/extension/bmap/bmap'
  // import { ECBasicOption } from 'echarts/types/dist/shared'
  import { mapStyle, mapData } from './helper'
  import Chart, { ECOption } from '@/components/echarts'
  defineOptions({
    name: 'Bmap',
  })
  const option = shallowRef<ECOption>({} as ECOption)

  onMounted(() => {
    loadBMap(BMAP_KEY).then(() => {
      option.value = {
        tooltip: {},
        title: {
          text: '外卖销售数据大盘',
          subtext: '销售趋势统计',
          sublink: 'https://www.baidu.com/',
          left: 'center',
        },
        bmap: {
          key: BMAP_KEY,
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: false,
          mapStyle: mapStyle,
        },
        series: [
          {
            name: '销售金额',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: mapData,
            encode: {
              value: 2,
            },
            itemStyle: {
              color: 'purple',
            },
            symbolSize: function (val: [number, number, number]) {
              return val[2] / 10
            },
            label: {
              show: false,
              position: 'right',
              formatter: (params: any) => {
                return params.name
              },
              color: 'purple',
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            name: '销售金额 top3',
            type: 'effectScatter',
            itemStyle: {
              color: 'purple',
              shadowBlur: 10,
              shadowColor: '#333',
            },
            coordinateSystem: 'bmap',
            data: mapData.sort((a, b) => b.value[2] - a.value[2]).slice(0, 3),
            encode: {
              value: 2,
            },

            symbolSize: function (val: [number, number, number]) {
              return val[2] / 10
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: 'purple',
            },
            scale: true,
            rippleEffect: {
              // 修改波纹的效果
              brushType: 'stroke',
            },
          },
        ],
      } as ECOption
    })
  })
</script>

<template>
  <div class="map-container">
    <Chart
      :style="{ width: '100%', height: '100%' }"
      autoresize
      :option="option"
    />
  </div>
</template>

<style lang="less" scoped>
  .map-container {
    width: 100%;
    height: 600px;
  }
</style>
